<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>UI</title>
		<link rel="stylesheet" type="text/css" href="css/injection.css"/>
	</head>
	<body id="myAxhub">
		1111
		<button id="auxhub">同步</button>
		<!-- <div id="mask" class="mask">
			<div class="div">
				<div class="title">
					<span><img src="./img/u58.png">同步原型</span>
					<span><img src="./img/u61.png">设置</span>
					<img src="./img/u65.png" alt="" style="float: right;">
				</div>
				<div id="upprd">
					<button>新建文件夹</button>
					<button>新建子文件夹</button>
					<button>重命名</button>
					<button>复制地址</button>
					<div id="treewin">
					</div>
					<div id="upfile" class="myAxhubBtn">
						立即同步
					</div>
				</div>
				<div id="seting" style="display: none;">
					<div>
						<label>
							服务器：
							<input type="text" id="serverip" value="" />
						</label>
					</div>
					<div>
						<label>
							网&nbsp;&nbsp;&nbsp;站：
							<input type="text" id="serverurl" value="" />
						</label>
					</div>
				</div>
			</div>
		</div> -->
	</body>
	<script src="js/jq3.6.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function http(url,data){
			return new Promise((resolve, reject)=>{
				$.post(url,data,function(data,status,xhr){
					if(status=='success')resolve(data)
					else reject(data)
				});
			})
		}
		
		let config={server:`http://162.14.113.45:8708`}
		const httpdata={
			createDirectory:(data)=>{return http(`${config.server}/index/createDirectory`,data)},//创建文件/子文件夹｛directoryName文件名称， folderPath目录地址｝
			fileList:(data)=>{return http(`${config.server}/index/fileList`,data)},//获取指定目录下文件列表｛folderPath目录地址｝
			fileUpload:()=>{return `${config.server}/index/fileUpload`},//文件上传｛directoryPath文件地址，file文件名称｝
			renameDirectory:(data)=>{return http(`${config.server}/index/renameDirectory`,data)},//重命名文件夹｛folderPath目录地址，newName新文件名称，oldName旧文件名称｝
		}
	
	
	
		let mask=$('<div id="mask" class="mask"></div>');//遮罩
		let div=$('<div class="div"></div>');//交互内容
		let title=$('<div class="title"></div>');//标题
			let tab1=$('<span><img src="./img/u58.png">同步原型</span>');
				tab1.click(function(){
					seting.hide();
					enddiv.hide();
					upprd.show();
					treewin.empty();
					httpdata.fileList({folderPath:config.serverPath}).then(v=>{
						treewin.empty()
						let arr=v.data.map(d=>{return d.name})
						treewin.append(createTree(arr,config.serverPath+'/'))
					})
				})
			let tab2=$('<span><img src="./img/u61.png">设置</span>');
				tab2.click(function(){
					upprd.hide();
					enddiv.hide();
					seting.show();
					initserver();
				})
				function initserver(){
					$('#serverip').val(config.server)
					httpdata.fileList({}).then(v=>{
						$('#serverurl').empty()
						config.serverPath=v.data[0].absolutePath
						v.data.forEach(item=>{
							$('#serverurl').append($(`<option value="${item.absolutePath}">${item.name}</option>`))
						})
						httpdata.fileList({folderPath:config.serverPath}).then(v=>{
							treewin.empty()
							let arr=v.data.map(d=>{return d.name})
							treewin.append(createTree(arr,config.serverPath+'/'))
						})
					})
				}
				initserver();
			let close=$('<img src="./img/u65.png" alt="" style="float: right;">');
				close.click(function(){mask.hide()})
			title.append(tab1)
			title.append(tab2)
			title.append(close)
		let message=$('<div id="message"></div>')
		let upprd=$('<div id="upprd"></div>');
			let dirNew=$('<button>新建文件夹</button>')
				dirNew.click(function(){
					createDirectory()
				})
			let dirNewDown=$('<button>新建子文件夹</button>')
				dirNewDown.click(function(){
					createDirectory(true)
				})
				//创建文件夹
				function createDirectory(deep=false){
					let directoryName=prompt('请输入新建文件夹名称','')
					if(directoryName){
						config.pathHead=config.pathHead?config.pathHead:config.serverPath;
						let folderPath=config.pathHead;
						let el=window.etarget?window.etarget:$('#treewin');//未选中节点取根节点
						if(window.etarget&&!deep){
							folderPath=folderPath.split('/')
							folderPath.pop();
							folderPath=folderPath.join('/')
							el=$(el).parent()//取父节点
							if(el.localName!='ul'){
								el=$(el).parent()//取父节点
							}
						}
						httpdata.createDirectory({directoryName,folderPath}).then(v=>{
							if(v.data){
								let li='';
								let ultype=!$(el).children('ul').length
								if(ultype){
									li=createTree([`${directoryName}`],`${folderPath}/`)
								}else{
									el=$($(el).children('ul'))
									li=$(`<li data='${folderPath}/${directoryName}'><button class="open">🡇</button><span>${directoryName}</span></li>`)
								}
								$(el).append(li)
							}else sendMessage('创建失败')
						})
					}
				}
			let dirName=$('<button>重命名</button>')
				dirName.click(function(){
					let newName=prompt('请输入重新命名文件夹名称','')
					if(newName){
						let folderPath=getPath();
						folderPath=folderPath.split('/')
						let oldName=folderPath.pop();
						folderPath=folderPath.join('/')
						httpdata.renameDirectory({newName,folderPath,oldName}).then(v=>{
							if(v.data){
								$(window.etarget).attr('data',folderPath+'/'+newName)
								$($(window.etarget)[0].childNodes[1]).text(newName)
							}else sendMessage('重新命名失败')
						})
					}
				})
			let dirCopy=$('<button>复制地址</button>')
				dirCopy.click(function(){
					let str=getPath()
					str=str.split('/').splice(3).join('/')
					str=`https://${str}/index.html`
					copytext(str)
				})
				function copytext(text) {
					let rng = document.createElement('input');
					document.body.appendChild(rng);
					rng.value = text;
					rng.readOnly="readonly";
					rng.select();
					document.execCommand("Copy");
					document.body.removeChild(rng);
					sendMessage("复制成功!");
				}
			let treewin=$('<div id="treewin"></div>')
			let upfile=$('<div id="upfile" class="myAxhubBtn">立即同步</div>')
				upfile.click(function(){
					let pid=getPath();
					if(!pid){
						sendMessage('请选择上传目录')
						return;
					}
					httpdata.fileList({folderPath:pid}).then(v=>{
						let up=true;
						if(v.data.length){
							up=confirm('所选文件夹已有文件或文件夹，继续上传将会覆盖同名文件，是否继续上传？')
						}
						if(up){
							console.log('上传')
							send&&send();
						}
					})
				})
			upprd.append(dirNew)
			upprd.append(dirNewDown)
			upprd.append(dirName)
			upprd.append(dirCopy)
			upprd.append(treewin)
			upprd.append(upfile)
					
		let seting=$('<div id="seting" style="display: none;"></div>');
			let saveserver=$('<div id="saveserver" class="myAxhubBtn">立即保存</div>')
			seting.append(`
				<div>
					<label>
						服务器：
					</label>
					<input type="text" id="serverip" value="" class="myAxhubInp"/>
				</div>
				<div>
					<label>
						网&nbsp;&nbsp;&nbsp;站：
					</label>
					<select id="serverurl" name="serverurl" class="myAxhubInp">
					</select>
				</div>
			`) 
			seting.append(saveserver)
			saveserver.click(function(){
				config.server=$('#serverip').val()
				config.serverPath=$('#serverurl').val()
				sendMessage('信息保存成功，点击同步原型开始同步吧。')
				tab1.click()
			})
		div.append(title)
		let enddiv=$('<div id="enddiv" style="display: none;"></div>');
			enddiv.append($('<div>文件同步成功，马上去分享吧！</div>'))
			let urlshow=$('<input type="text" id="urlshow" value="" class="myAxhubInp" style="padding:0"/>')
			let urlcopy=$('<button>复制</button>')
				urlcopy.click(function(){
					let str=getPath()
					str=str.split('/').splice(3).join('/')
					str=`https://${str}/index.html`
					copytext(str)
				})
			let urlopen=$('<button>打开</button>')
				urlopen.click(function(){
					let str=getPath()
					str=str.split('/').splice(3).join('/')
					str=`https://${str}/index.html`
					window.open(str)
				})
			let goupprd=$('<div id="goupprd" class="myAxhubBtn">返回</div>')
				goupprd.click(function(){
					upfile.text('立即同步');
					enddiv.hide();
					upprd.show();
				})
			enddiv.append(urlshow)
			enddiv.append(urlcopy)
			enddiv.append(urlopen)
			enddiv.append(goupprd)
		div.append(message)
		div.append(upprd)
		div.append(seting)
		div.append(enddiv)
		mask.append(div)
		$('body').append(mask)
		$("#auxhub").click(function(){mask.show()})
		
		//设置当前选中目录列
		$("#mask").on('click','li',function(e){
			$(".cheack").toggleClass("cheack");
			$(e.target).toggleClass("cheack");
			//let pid=$(e.target).attr("data");
			window.etarget=e.target
			config.pathHead=getPath();
		});
		//展开目录获取
		$("#mask").on('click','.open',function(e){
		   e.stopPropagation()
		   let parent=$(e.target).parent()
		   let pid=$(parent).attr("data");
		   httpdata.fileList({folderPath:pid}).then(v=>{
				//$(parent).empty()
				e.target.disabled=true;
				let arr=v.data.map(d=>{return d.name})
				$(parent).append(createTree(arr,pid+'/'))
		   })
		});
		//创建文件夹树
		function createTree(arr,pid){
			let ul=$('<ul></ul>')
			arr.forEach(v=>{
				ul.append($(`<li data='${pid+v}'><button class="open">🡇</button><span>${v}</span></li>`))
			})
			return ul;
		}
		//获取文件目录路径
		function getPath(){
			if(!window.etarget)return '';
			return $(window.etarget).attr("data");
		}
		//小提示消息
		function sendMessage(msg){
			$('#message').text(msg);
			$('#message').show();
			setTimeout(function(){
				$('#message').hide();
			},3000)
		}
		
		
	</script>
</html>
